<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>美妆商城 - 聚美优品 - 【极速免税店 品牌防伪码】正品化妆品电商,在美上市,30天无理由退货,质量保险</title>
  <!-- 引入小图标 -->
  <link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon">
  <!-- 引入bootstrap样式 -->
  <link rel="stylesheet" href="./css/bootstrap.css">
  <!-- 引入css样式 -->
  <link rel="stylesheet" href="./css/Beautifulmall.css">
  <!-- 引入reset.css -->
  <link rel="stylesheet" href="./css/reset.css">

  <!-- 引入jquery.js -->
  <script src="./js/jquery-3.3.1.js"></script>
  <!-- poper.js -->
  <script src="./js/poper.js"></script>
  <!-- bootstrap.js -->
  <script src="./js/bootstrap.js"></script>
  <!-- 引入index.js -->
  <script src="./js/index.js"></script>
  <!-- 引入本页面的js -->
  <script src="./js/Beautifulmall.js"></script>

</head>
<style>
  #demo {
        max-width: 780px;
        height:auto;
    }
    .carousel-fade .carousel-inner .carousel-item {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	transition-property: opacity;
}
.carousel-fade .carousel-inner .carousel-item,
.carousel-fade .carousel-inner .active.carousel-item-left,
.carousel-fade .carousel-inner .active.carousel-item-right {
	opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
	opacity: 1;
}

.carousel-vertical .carousel-inner .carousel-item-next.carousel-item-left,
.carousel-vertical .carousel-inner .carousel-item-prev.carousel-item-right {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.carousel-vertical .carousel-inner .active.carousel-item-left,
.carousel-vertical .carousel-inner .carousel-item-prev {
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}
.carousel-vertical .carousel-inner .active.carousel-item-right,
.carousel-vertical .carousel-inner .carousel-item-next {
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}
</style>

<body>
  <!-- 顶部导航 -->
  <div class="top-bar">
    <div class="common">
      <!-- 顶部导航左边 -->
      <div class="top-bar-left">
        <span>欢迎来到聚美！</span>
        <a href="./login.html">请登录</a>
        <a href="./register.html">快速注册</a>
      </div>
      <!-- 顶部导航右边 -->
      <div class="top-bar-right">
        <ul>
          <li><a href="">正品保证</a></li>
          <li><a href="">订单查询</a></li>
          <li class="xin"><a href="">收藏的品牌</a></li>
          <li class="my-jm-box">
            <span class="my-jm">
              我的聚美
              <ul class="my-jm-sel-menu">
                <li><a href="">我的订单</a></li>
                <li><a href="">我的现金券</a></li>
                <li><a href="">我的红包</a></li>
                <li><a href="">我的余额</a></li>
                <li><a href="">我的提现退款</a></li>
                <li><a href="">我的收藏</a></li>
                <li><a href="">我的心愿单</a></li>
                <li><a href="">会员中心</a></li>
                <li><a href="">礼品卡兑换</a></li>
              </ul>
            </span>
          </li>
          <li class="tel-jm">
            <span class="line"></span>
            <a href="" class="tel-jm-sel">
              手机聚美
            </a>
          </li>

          <li> <span class="line"></span></li>
          <li class="mores" style=" margin-left: 0px;">
            <span class="more">
              更多
              <ul class=" my-jm-sel-menu1">
                <li><a href="">邀请好友</a></li>
                <li><a href="">加入收藏</a></li>
                <li><a href="">新浪微博</a></li>
                <li><a href="">聚美微信</a></li>
                <li><a href="">百度贴吧</a></li>
                <li><a href="">腾讯微博</a></li>
                <li><a href="">人人公众主页</a></li>
              </ul>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 搜索框 -->
  <div class="serch">
    <div class="common">
      <a href="#">
        <img src="./image/logo.jpg" alt="" class="serch-logo">
      </a>
      <div class="serch-center">
        <div class="serch-center-top">
          <input type="text">
          <button>搜索</button>
        </div>

        <!-- 中间部分 -->
        <div class="serch-center-small">
          <a href="">保湿</a>
          <span></span>
          <a href="">面膜</a>
          <span></span>
          <a href="">洗面奶</a>
          <span></span>
          <a href="">补水</a>
          <span></span>
          <a href="">香水</a>
          <span></span>
          <a href="">眼霜</a>
          <span></span>
          <a href="">口红</a>
          <span></span>
          <a href="">护肤套装</a>
          <span></span>
          <a href="">BB霜</a>
        </div>

      </div>
      <!-- 结算 -->
      <a href="" class="shop">
        <s class="shopPic">
          <img src="./image/cart.gif" alt="">
        </s>
        <span class="shop-car">去购物车结算</span>
        <i></i>
        <div class="box">
          <p>购物车中没有商品，</p>
          <p>快去挑选心爱的商品吧!</p>
        </div>
      </a>
    </div>
  </div>

  <!-- 导航栏 -->
  <div class="nav">
    <div class="common">
      <!-- 导航栏左边部分 -->
      <div class="nav-left">
        <ul class="nav-big-ul">
          <li class="first-page"><a href="./index.html">首页</a></li>
          <li><a href="">极速免税店</a></li>
          <li><a href="">母婴特卖</a></li>
          <li class="nav-makeup">
            <a href="">美妆商城</a>
            <b></b>
            <div class="nav-makeup-menu">
              <ul>
                <li style="margin-left: 9px;">
                  <a href="">
                    <img src="./image/nav-makeup-one.jpg" alt="">
                  </a>
                </li>
                <!-- 国际大牌 -->
                <li>
                  <h4>
                    <i></i>
                    国际大牌
                  </h4>
                  <p>
                    <a href="#">兰蔻</a>
                    <a href="#">娇韵诗</a>
                    <a href="#">伊丽莎白雅顿</a>
                  </p>
                  <p>
                    <a href="#">雅诗兰黛</a>
                    <a href="#">欧莱雅</a>
                    <a href="#">兰芝</a>
                    <a href="#">倩碧</a>
                  </p>
                  <p>
                    <a href="#">雅漾</a>
                    <a href="#">菲诗小铺</a>
                    <a href="#">悦诗风吟</a>
                  </p>
                </li>
                <!-- 护肤 -->
                <li>
                  <h4>
                    <i></i>
                    护肤
                  </h4>
                  <p>
                    <a href="#">洁面</a>
                    <a href="#">爽肤水</a>
                    <a href="#">精华</a>
                    <a href="#">乳液</a>
                    <a href="#">面霜</a>
                  </p>
                  <p>

                    <a href="#">眼霜</a>
                    <a href="#">面膜</a>
                    <a href="#">护肤套装</a>
                  </p>
                </li>
                <!-- 彩妆 -->
                <li>
                  <h4>
                    <i></i>
                    彩妆
                  </h4>
                  <p>
                    <a href="#">卸妆</a>
                    <a href="#">BB霜</a>
                    <a href="#">粉底液</a>
                    <a href="#">粉饼</a>
                  </p>
                  <p>
                    <a href="#">眼影</a>
                    <a href="#">眼线笔</a>
                    <a href="#">睫毛膏</a>
                    <a href="#">眉笔</a>
                  </p>
                  <p>
                    <a href="#">口红</a>
                    <a href="#">腮红</a>

                  </p>

                </li>
                <li style="margin-left: 9px;">
                  <a href="">
                    <img src="./image/nav-makeup-two.jpg" alt="">
                  </a>
                </li>
                <!-- 香氛 -->
                <li>
                  <h4>
                    <i></i>
                    香氛
                  </h4>
                  <p>
                    <a href="#">女士香水</a>
                    <a href="#">男士香水</a>
                    <a href="#">中性香水</a>
                  </p>
                  <p>
                    <a href="#">Q版香水</a>
                    <a href="#">香水套装</a>
                    <a href="#">精油</a>
                  </p>
                </li>
                <!-- 男士专区 -->
                <li>
                  <h4>
                    <i></i>
                    男士专区
                  </h4>
                  <p>
                    <a href="#">洁面</a>
                    <a href="#">爽肤水</a>
                    <a href="#">面霜</a>
                    <a href="#">精华</a>
                  </p>
                  <p>
                    <a href="#">洗发</a>
                    <a href="#">沐浴</a>
                  </p>
                </li>
                <li>
                  <h4>
                    <i></i>
                    热门搜索
                  </h4>
                  <p>
                    <a href="#">面膜贴</a>
                    <a href="#">洗面奶</a>
                    <a href="#">唇膏</a>
                    <a href="#">去黑头</a>
                  </p>
                  <p>

                    <a href="#">祛斑</a>
                    <a href="#">隔离</a>
                    <a href="#">祛痘</a>
                    <a href="#">去角质</a>
                  </p>
                  <p>
                    <a href="#">指甲油</a>

                  </p>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="">国际轻奢</a></li>
          <li><a href="">服装运动</a></li>
          <li><a href="">鞋包服饰</a></li>
        </ul>

      </div>
      <!-- 导航栏右边部分 -->
      <div class="nav-right">
        <ul>
          <li><a href=""><img src="./image/nav-right-one.jpg" alt=""></a></li>
          <li><a href=""><img src="./image/nav-right-two.jpg" alt=""></a></li>
          <li><a href=""><img src="./image/nav-right-three.jpg" alt=""></a></li>
        </ul>
      </div>

    </div>
  </div>


  <!-- 分类导航 -->
  <div class="Classified-nav">
    <div class="common">
      <span id="line"></span>
      <ul>
        <li> <a href="#" style="font-weight:700;margin-left: 0px">美妆商城首页</a></li>
        <li> <a href="#">个人护理</a></li>
        <li><a href="#">护肤</a></li>
        <li> <a href="#">彩妆</a></li>
        <li> <a href="#">香氛</a></li>
      </ul>





    </div>
  </div>

  <!-- 全部分类 -->
  <div class="All-categories">
    <div class="common">
      <!-- 全部分类左边部分 -->
      <div class="All-categories-left">
        <!-- 全部分类左边部分----上边 -->
        <div class="All-categories-left-top">
          <h2>全部分类</h2>
          <ul>
            <!-- 推荐名牌 -->
            <li class="li-out">
              <h3>推荐品牌</h3>
              <p>
                <a href="#">欧莱雅</a>
                <a href="#">菲诗小铺</a>
                <a href="#">雅诗兰黛</a>
                <a href="#">韩束</a>
                <a href="#">倩碧</a>
                <a href="#">雅顿</a>
                <a href="#">佰草集</a>
              </p>
            </li>
            <!-- 护肤 -->
            <li class="li-out">
              <h3>护肤</h3>
              <p>
                <a href="#">洁面</a>
                <a href="#">化妆水</a>
                <a href="#">精华</a>
                <a href="#">乳液</a>
                <a href="#">面霜</a>
                <a href="#">眼霜</a>
                <a href="#">面膜</a>
                <a href="#">护肤套装</a>
              </p>
            </li>
            <!-- 彩妆 -->
            <li class="li-out">
              <h3>彩妆</h3>
              <p>
                <a href="#">卸妆</a>
                <a href="#">防晒</a>
                <a href="#">BB霜</a>
                <a href="#">粉饼</a>
                <a href="#">眼影</a>
                <a href="#">睫毛膏</a>
                <a href="#">唇彩</a>
                <a href="#">腮红</a>
                <a href="#">彩妆套装</a>
              </p>
            </li>
            <!-- 香氛 -->
            <li class="li-out">
              <h3>香氛</h3>
              <p>
                <a href="#">女士香水</a>
                <a href="#">男士香水</a>
                <a href="#">中性香水</a>
                <a href="#">Q版香水</a>
                <a href="#">香水套装</a>
              </p>
            </li>
            <!-- 个人护理 -->
            <li class="li-out">
              <h3>个人护理</h3>
              <p>
                <a href="#">洗发</a>
                <a href="#">护发</a>
                <a href="#">沐浴</a>
                <a href="#">润肤乳</a>
                <a href="#">牙膏</a>
                <a href="#">发膜</a>
                <a href="#">脱毛</a>
                <a href="#">护理套装</a>
                <a href="#">彩妆套装</a>
              </p>
            </li>
            <!-- 男士专区 -->
            <li class="li-out">
              <h3>男士专区</h3>
              <p>
                <a href="#">洁面</a>
                <a href="#">爽肤水</a>
                <a href="#">乳液</a>
                <a href="#">面霜</a>
                <a href="#">精华</a>
                <a href="#">洗发</a>
                <a href="#">沐浴</a>
                <a href="#">男香</a>
              </p>
            </li>
            <!-- 奢品美妆 -->
            <li class="li-out">
              <h3>奢品美妆</h3>
              <p>
                <a href="#">雅诗兰黛</a>
                <a href="#">迪奥</a>
                <a href="#">海蓝之谜</a>
                <a href="#">希思黎</a>
              </p>
            </li>
          </ul>
        </div>
        <!-- 全部分类左边部分----下边 -->
        <div class="All-categories-left-bottom">
          <img src="./image/All-categories-left-bottom-pic.jpg" alt="" class="move">
        </div>
      </div>
      <!-- 全部分类中间部分 -->
      <div class="All-categories-center">
        <!-- 全部分类中间部分-上边 -->
        <div class="All-categories-center-top">
          <!-- 全部分类中间部分-上边-轮播图 -->
          <div class="All-categories-center-top-lunbo">
            <div id="demo" class="carousel slide carousel-fade" data-ride="carousel">

              <!-- 指示符 -->
              <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
              </ul>

              <!-- 轮播图片 -->
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="./image/Beautifulmall-lunto-1.jpg">
                </div>
                <div class="carousel-item">
                  <img src="./image/Beautifulmall-lunto-2.jpg">
                </div>
                <div class="carousel-item">
                  <img src="./image/Beautifulmall-lunto-3.jpg">
                </div>
              </div>

              <!-- 左右切换按钮 -->
              <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
              </a>
              <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
              </a>

            </div>
          </div>
          <!-- 全部分类中间部分-上边-图片 -->
          <div class="All-categories-center-top-pic">
            <ul>
              <li><a href=""><img src="./image/All-categories-center-top-pic-1.jpg" alt="" class="move"></a></li>
              <li><a href=""><img src="./image/All-categories-center-top-pic-2.jpg" alt="" class="move"></a></li>
              <li><a href=""><img src="./image/All-categories-center-top-pic-3.jpg" alt=" " class="move"></a></li>
            </ul>
          </div>
        </div>
        <!-- 全部分类中间部分-下边 -->
        <div class="All-categories-center-bottom">
          <!-- 导航 -->
          <div class="All-categories-center-bottom-nav">
            <ul>
              <li><a href="#" class="current3">推荐品牌</a></li>
              <li><a href="#">独家品牌</a></li>
              <li><a href="#">欧美品牌</a></li>
              <li><a href="#">日韩品牌</a></li>
              <li><a href="#">国货品牌</a></li>
              <li><a href="#">洗护品牌</a></li>
            </ul>
            <div class="line1">
              <s class="arrow"></s>
            </div>
          </div>
          <!-- selection -->
          <div class="content">
            <div class="sel-right-arrow">
              <a href="javascript:;" class="
                  prev"></a>
              <a href="javascript:;" class="next"></a>
            </div>
            <!-- 第一块 -->
            <div class="selection selection1" style="display:block">
              <ul>
                <li> <a href="#"> <img src="./image/selection1-1.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection1-2.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection1-3.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection1-4.jpg" alt=""> </a> </li>

                <li> <a href="#"> <img src="./image/selection1-6.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection1-7.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection1-8.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection1-9.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection1-10.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection1-11.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection1-12.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection1-13.jpg" alt=""> </a> </li>
              </ul>
              <div class="sel-right">
                <li> <a href="#"> <img src="./image/selection1-5.jpg" alt="" class="sel-five"> </a> </li>
              </div>
            </div>
            <!-- 第二块 -->
            <div class="selection selection1">
              <ul>

                <li> <a href="#"> <img src="./image/selection2-1.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection2-2.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection2-3.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection2-4.jpg" alt=""> </a> </li>

                <li> <a href="#"> <img src="./image/selection2-6.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection2-7.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection2-8.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection2-9.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection2-10.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection2-11.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection2-12.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection2-13.jpg" alt=""> </a> </li>


              </ul>
              <div class="sel-right">
                <li> <a href="#"> <img src="./image/selection2-5.jpg" alt="" class="sel-five"> </a> </li>

              </div>
            </div>
            <!-- 第三块 -->
            <div class="selection selection1">
              <ul>

                <li> <a href="#"> <img src="./image/selection3-1.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection3-2.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection3-3.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection3-4.jpg" alt=""> </a> </li>

                <li> <a href="#"> <img src="./image/selection3-6.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection3-7.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection3-8.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection3-9.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection3-10.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection3-11.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection3-12.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection3-13.jpg" alt=""> </a> </li>


              </ul>
              <div class="sel-right">
                <li> <a href="#"> <img src="./image/selection3-5.jpg" alt="" class="sel-five"> </a> </li>
              </div>
            </div>
            <!-- 第四块 -->
            <div class="selection selection1">
              <ul>

                <li> <a href="#"> <img src="./image/selection4-1.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-2.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-3.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-4.jpg" alt=""> </a> </li>

                <li> <a href="#"> <img src="./image/selection4-6.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-7.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-8.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-9.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-10.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-11.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-12.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-13.jpg" alt=""> </a> </li>


              </ul>
              <div class="sel-right">
                <li> <a href="#"> <img src="./image/selection4-5.jpg" alt="" class="sel-five"> </a> </li>

              </div>
            </div>
            <!-- 第五块 -->
            <div class="selection selection1">
              <ul>

                <li> <a href="#"> <img src="./image/selection5-1.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection5-2.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection5-3.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection5-4.jpg" alt=""> </a> </li>

                <li> <a href="#"> <img src="./image/selection5-6.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection5-7.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection5-8.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection5-9.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection5-10.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection5-11.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection5-12.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection5-13.jpg" alt=""> </a> </li>


              </ul>
              <div class="sel-right">
                <li> <a href="#"> <img src="./image/selection5-5.jpg" alt="" class="sel-five"> </a> </li>
              </div>
            </div>

            <!-- 第六块 -->
            <div class="selection selection1">
              <ul>

                <li> <a href="#"> <img src="./image/selection4-1.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-2.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-3.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-4.jpg" alt=""> </a> </li>

                <li> <a href="#"> <img src="./image/selection4-6.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-7.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-8.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-9.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-10.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-11.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-12.jpg" alt=""> </a> </li>
                <li> <a href="#"> <img src="./image/selection4-13.jpg" alt=""> </a> </li>


              </ul>
              <div class="sel-right">
                <li class=""> <a href="#"> <img src="./image/selection6-5.jpg" alt="" class="sel-five"> </a> </li>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>


  <!-- 搜美妆 -->
  <div class="serch-nav-top">
    <div class="common">
      <i></i>
      <div class="select">
        <input type="text" name="" id="serch-nav-top-text" placeholder="补水">
        <div class="menu">
          <ul>
            <li>补水
              <span>约4553件</span>
            </li>
            <li>补水面膜
              <span>约3453件</span>
            </li>
            <li>补水套装
              <span>约4773件</span>
            </li>
            <li>补水喷雾
              <span>约493件</span>
            </li>
            <li>补水精华
              <span>约4658件</span>
            </li>
            <li>补水面膜保湿
              <span>约221件</span>
            </li>
            <li>补水爽肤水
              <span>约425件</span>
            </li>
          </ul>
        </div>
      </div>

      <button class="">搜美妆</button>

    </div>
  </div>


  <!-- 底部 -->
  <div class="footer">
    <div class="common">
      <!-- footer-顶部 -->
      <div class="footer-top">
        <ul>
          <li class="footer-top-one">
            <a href=""></a>
            <b>值得信赖美妆电商</b>
            <br>
            <span>四千万用户信赖</span>
          </li>
          <li class="footer-top-one  footer-top-two">
            <a href=""></a>
            <b>成功在美上市</b>
            <br>
            <span>股票代码NYSE:JMEI </span>
          </li>
          <li class="footer-top-one footer-top-three">
            <a href=""></a>
            <b>品牌防伪码</b>
            <br>
            <span>支持品牌官网验真</span>
          </li>
          <li class="footer-top-one footer-top-four">
            <a href=""></a>
            <b>30天无理由退货</b>
            <br>
            <span>只要不满意无理由退货</span>
          </li>
          <li class="footer-top-one footer-top-five">
            <a href=""></a>
            <b>百万用户口碑</b>
            <br>
            <span>帮你只选对的,不选贵的</span>
          </li>
          <li class="footer-top-one footer-top-six">
            <a href=""></a>
            <b>订单闪电发货</b>
            <br>
            <span>1.5小时订单急速出库</span>
          </li>
          <li class="footer-top-one footer-top-seven">
            <a href=""></a>
            <b>大牌明星热荐</b>
            <br>
            <span>打造精致明星脸</span>
          </li>
        </ul>

      </div>

      <!-- 友情链接 -->
      <div class="footer-firend">
        <!--左边部分 -->
        <ul class="one-ul">
          <li class="footer-one">
            <h4>服务保障</h4>
            <a href="#">品牌真品防伪码</a>
            <a href="#">正品保证</a>
            <a href="#">30天无条件退货</a>
            <a href="#">专属客服服务</a>
            <span>总裁邮箱ceo@jumei.com</span>
          </li>
          <li>
            <h4>使用帮助</h4>
            <a href="">新手指南</a>
            <a href="">常见问题</a>
            <a href="">帮助中心</a>
            <a href="">用户协议</a>
            <a href="">公示制度</a>
          </li>
          <li>
            <h4>支付方式</h4>
            <a href="">货到付款</a>
            <a href="">在线支付</a>
            <a href="">余额支付</a>
            <a href="">现金券支付</a>
          </li>
          <li>
            <h4>配送方式</h4>
            <a href="">包邮政策</a>
            <a href="">配送说明</a>
            <a href="">运费说明</a>
            <a href="">验货签收</a>
          </li>
          <li>
            <h4>售后服务</h4>
            <a href="">正品承诺</a>
            <a href="">售后咨询</a>
            <a href="">退货政策</a>
            <a href="">退货办理</a>
          </li>
        </ul>
        <!-- 右边部分 -->
        <div class="footer-right">
          <ul>
            <li>
              <b>手机聚美</b>
              <a href=""></a>
              <span>下载移动客户端</span>
            </li>
            <li>
              <b>聚美微信</b>
              <a href=""></a>
              <span>聚美官方微信</span>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <!-- 为自己代言 -->
    <div class="myself">
      <a href="#"></a>
    </div>
    <!-- 合作商 -->
    <div class="cooperation">
      <div class="common">
        <a href="">关于聚美优品</a>
        <a href="">INVESTOR RELATIONS</a>
        <a href="">合作招商</a>
        <a href="">获取更新</a>
        <a href="">加入聚美</a>
        <a href="">品牌合作专区</a>
        <a href="">网站联盟</a>
        <a href="">媒体报道</a>
        <a href="">商务合作</a>
      </div>
    </div>
    <!-- footer-底部 -->
    <div class="footer-bottom">
      <div class="common">
        <p>

          COPYRIGHT © 2010-2018 北京创锐文化传媒有限公司 JUMEI.COM 保留一切权利。
          客服热线：400-123-8888
        </p>
        <p>
          <span>京公网安备 11010102001226 | </span>
          <a href="">京ICP证111033号|</a>
          <a href="">食品经营许可证|</a>
          <a href="">营业执照|</a>
          <a href="">ICP许可证|</a>
          <a href="">出版物经营许可证</a>
        </p>
        <p>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href="">
            <img src="./image/footer-bottom.jpg" alt="">
          </a>
        </p>
      </div>
    </div>
  </div>
</body>

</html>